<template>
    <div>
        <Row :gutter="10">
            <Col span="24">
            <Card class="slideList">
                <p slot="title" style="height: 32px">
                    <Icon type="ios-albums-outline"></Icon>
                    金币比例设置
                    <Button type="success" @click="addPay">添加新比例</Button>
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="payList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
            </Card>
            </Col>
        </Row>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
        <Modal v-model="payVatity" title="等级设置" @on-ok="handleSubmit('payModel')" @on-cancel="handleReset('payModel')">
            <Form ref="payModel" :model="payModel" :rules="ruleValidate" :label-width="100">
                <FormItem label="人民币" prop="rmb">
                    <InputNumber :min="0" v-model="payModel.rmb"  placeholder="请输入人民币"></InputNumber>
                </FormItem>
                <FormItem label="金币" prop="gold">
                    <InputNumber :min="0" v-model="payModel.gold"  placeholder="请输入金币"></InputNumber>
                </FormItem>
                <FormItem label="优惠信息" prop="tag">
                    <Input v-model="payModel.tag" placeholder="请输入优惠信息" />
                </FormItem>
                <FormItem label="产品名称" prop="title">
                    <Input v-model="payModel.title" placeholder="请输入产品名称" />
                </FormItem>
                <FormItem label="状态" prop="status">
                    <Select v-model="payModel.status" style="width:100px">
                        <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>

            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '排序',
                        align: 'center',
                        key: 'id',
                        "sortable": true,
                    },
                    {
                        title: '人民币',
                        align: 'center',
                        key: 'rmb',
                    },
                    {
                        title: '金币',
                        align: 'center',
                        key: 'gold',
                    },
                    {
                        title: '优惠信息',
                        align: 'center',
                        key: 'tag',
                    },
                    {
                        title: '产品名称',
                        align: 'center',
                        key: 'title',
                    },
                    {
                        title:'状态',
                        key:'status',
                        align:'center',
                        filters: [
                            {label: '下架',value: 0},
                            {label: '正常',value: 1}

                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.status === 0;
                            } else if (v === 1) {
                                return r.status === 1;
                            }
                        },
                        render(h,column,index){
                            const row=column.row;
                            if(row.status==0){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#990000'
                                        },
                                    }, '下架'),
                                ]);
                            }else if(row.status==1){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#009966'
                                        },
                                    }, '正常'),
                                ]);
                            }
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 190,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.upPay(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deletePay(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }


                ],
                selectURl:'/paymanager/list',
                upOrAddURl:'/paymanager/saveoredit',
                deleteURl:'/paymanager/delete',
                payList:[],
                tipeNews:'暂无数据',
                payVatity:false,
                payModel:{},
                stateList:[
                    {
                        value: 0,
                        label: '下架'
                    },
                    {
                        value: 1,
                        label: '正常'
                    }
                ],
                ruleValidate: {
                    tag: [
                        { required: true, message: '优惠信息不能为空', trigger: 'blur' },
                    ],
                    title: [
                        { required: true, message: '产品名称不能为空', trigger: 'blur' },
                    ]
                },
                total:0,
                pageSize:0,
                page:1,
            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self = this;
                self.$axios.get(self.selectURl + '?curr=' + self.page).then((res) => {
                    self.payList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            addPay(){
                let self = this;
                self.payModel={};
                self.payVatity=true;
            },
            upPay(index){
                let self=this;
                self.payModel = self.payList[index];
                self.payVatity=true;
            },
            deletePay(index){
                let self=this;
                let payDele = self.payList[index];
                self.$axios.post(self.deleteURl+'/'+payDele.id).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，此条兑换比例删除成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            handleSubmit(){
                let self=this;
                self.payVatity=false;
                self.$axios.post(self.upOrAddURl,self.payModel).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，添加成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，添加失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            handleReset(){
                this.payVatity=false;
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }
        }
    }
</script>